<template>
  <div>
    <div>
      <el-button @click="handleAddClick()" type="primary" size="small">添加管理员</el-button>
    </div>
    <el-table :data="operatorList" v-loading="loading" style="width: 100%">
      <el-table-column prop="loginName" label="昵称" width="180"></el-table-column>
      <el-table-column prop="realName" label="姓名" width="180"></el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button type="primary" @click="handleEditClick(scope.row)" size="small" plain>编辑</el-button>
        <el-button type="primary" @click="handleRoleEditClick(scope.row)" size="small" plain>角色</el-button>
        <el-button :type="scope.row.accountNonLocked?'success':'info'" @click="handleDisableClick(scope.row)" size="small" plain>{{scope.row.accountNonLocked?'解锁':'锁定'}}</el-button>
      </template>
    </el-table-column>
    </el-table>
    <br>
    <el-pagination background layout="prev, pager, next" :total="pageInfo.total"></el-pagination>
    <el-dialog :title="!editing?'新建操作员':'编辑操作员'" :visible.sync="showEditDialog">
      <el-form ref="operatorEditForm" :model="editOperator" :rules="editOperatorRules">
        <el-form-item label="登录名" :label-width="formLabelWidth" prop="loginName">
          <div class="text-input">
            <el-input v-model="editOperator.loginName" auto-complete="off"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="realName">
          <div class="text-input">
            <el-input v-model="editOperator.realName" auto-complete="off"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="mobile">
          <div class="text-input">
            <el-input v-model="editOperator.mobile" auto-complete="off"></el-input>
          </div>
        </el-form-item>
        <el-form-item v-if="!editing" label="登录密码" :label-width="formLabelWidth" prop="loginPassword">
          <div class="text-input">
            <el-input v-model="editOperator.loginPassword" auto-complete="off" type="password"></el-input>
          </div>
        </el-form-item>
        <el-form-item v-if="!editing" label="确认密码" :label-width="formLabelWidth" prop="loginPasswordConfirm">
          <div class="text-input">
            <el-input v-model="editOperator.loginPasswordConfirm" auto-complete="off" type="password"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑角色" :visible.sync="roleEditDialog">
      <div style="text-align: center;">
        <el-transfer v-model="checkedRoleList" style="text-align: left; display: inline-block"
          :data="roleList"
          :titles="['未有角色', '已有角色']"
          :props="{key: 'id', label: 'roleName'}">
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="roleEditConfirmClick()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码确认'))
      } else if (this.editOperator.loginPassword === this.editOperator.loginPasswordConfirm) {
        callback()
      } else {
        callback(new Error('密码确认和密码不一致'))
      }
    }
    return {
      operatorList: [],
      loading: false,
      pageInfo: {
        page: 0,
        pageSize: 0,
        total: 0
      },
      roleList: [],
      checkedRoleList: [],
      showEditDialog: false,
      roleEditDialog: false,
      editing: true,
      formLabelWidth: '100px',
      editOperator: {
        id: null,
        loginName: '',
        loginPassword: '',
        realName: '',
        mobile: '',
        loginPasswordConfirm: ''
      },
      editOperatorRules: {
        loginName: [
          { required: true, message: '请输入登录ID', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        loginPassword: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入您的手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
        ],
        loginPasswordConfirm: [
          { validator: validatePass }
        ]
      }
    }
  },
  methods: {
    reloadOperatorList: function () {
      this.loading = true
      var postData = { page: this.pageInfo.page, pageSize: this.$config.PAGE_SIZE }
      this.$axios.post(this.$api.OPERATOR_PAGE.url, postData).then(response => {
        if (response.data.code === 0) {
          // 登录成功设置
          this.loading = false
          this.operatorList = response.data.data.pageData
          this.pageInfo.total = response.data.data.total
        }
      })
    },
    reloadRoleList: function () {
      this.loading = true
      this.$axios.get(this.$api.ROLE_ALL.url).then(response => {
        if (response.data.code === 0) {
          this.roleList = response.data.data.all
          console.log(this.roleList)
        }
      })
    },
    clearEditOperatorForm: function () {
      this.editOperator.id = null
      this.editOperator.loginName = ''
      this.editOperator.loginPassword = ''
      this.editOperator.realName = ''
      this.editOperator.mobile = ''
      this.editOperator.loginPasswordConfirm = ''
      if (this.$refs.operatorEditForm) {
        this.$refs.operatorEditForm.resetFields()
      }
    },
    handleAddClick: function () {
      this.editing = false
      this.clearEditOperatorForm()
      this.showEditDialog = true
    },
    handleEditClick: function (operator) {
      this.editing = true
      this.clearEditOperatorForm()
      this.editOperator.id = operator.id
      this.editOperator.loginName = operator.loginName
      this.editOperator.realName = operator.realName
      this.editOperator.mobile = operator.mobile
      // 打开
      this.showEditDialog = true
    },
    handleRoleEditClick: function (operator) {
      this.editing = true
      this.editOperator.id = operator.id
      this.checkedRoleList = operator.roleSet.map(role => role.id)
      this.roleEditDialog = true
    },
    handleDisableClick: function (operator) {
      var _this = this
      var msg = operator.accountNonLocked ? '您要解锁该用户吗？' : '您要锁定该用户吗？'
      this.$bus.$emit('showYesNo', '系统信息', msg, function () {
        var postData = { id: operator.id }
        this.$axios.post(this.$api.OPERATOR_LOCK.url, postData).then(response => {
          console.log('respone', response)
          if (response.data.code === 0) {
            console.log('锁定 / 解锁 成功')
            this.$message({
              message: '操作成功!',
              type: 'success'
            })
            _this.reloadOperatorList()
          }
        })
      })
    },
    handleDeleteClick: function (operator) {
    },
    roleEditConfirmClick: function () {
      var url = this.$api.OPERATOR_UPDATE_ROLE.url
      var roles = this.checkedRoleList.map(key => { return { id: key } })
      var postData = {
        id: this.editing ? this.editOperator.id : null,
        roleSet: roles
      }
      console.log(url, postData)
      this.$axios.post(url, postData).then(response => {
        if (response.data.code === 0) {
          // 登录成功设置
          this.loading = false
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
          this.roleEditDialog = false
          this.reloadOperatorList()
        }
      }).catch((err) => {
        this.logining = false
        this.$message.error(err.message)
      })
    },
    dialogConfirm: function () {
      this.$refs['operatorEditForm'].validate((valid) => {
        if (valid) {
          var url = this.editing ? this.$api.OPERATOR_UPDATE.url : this.$api.OPERATOR_ADD.url
          var postData = JSON.parse(JSON.stringify(this.editOperator))
          console.log(url, postData)
          this.$axios.post(url, postData).then(response => {
            if (response.data.code === 0) {
              // 登录成功设置
              this.loading = false
              this.$message({
                message: '操作成功!',
                type: 'success'
              })
              this.showEditDialog = false
              this.reloadOperatorList()
            }
          }).catch((err) => {
            this.logining = false
            this.$message.error(err.message)
          })
        }
      })
    }
  },
  mounted: function () {
    this.reloadOperatorList()
    this.reloadRoleList()
  }
}
</script>
<style scoped>
.text-input{
  width:240px;
}
</style>
